<template>
  <view class="page">
    <view class="top">
      <image
        src="/pages/customer-center/static/auth/logo.png"
        class="top-logo"
      />
      <view class="top-title"> 蜜雪冰城 </view>
    </view>
    <view class="warm-tips">成为会员，立享更多优惠福利</view>
    <view class="login-action">
      <view class="login-tips"> 授权绑定手机号 为您提供更好的服务 </view>
      <view
        class="login-btn"
        @tap="handleLogin"
      >
        一键登录
      </view>
      <view class="login-agree">
        <uni-icons
          :type="isAgree ? 'circle' : 'circle-filled'"
          size="18"
          :color="isAgree ? '#333333' : '#E60012'"
          @tap="isAgree = !isAgree"
        />
        <view class="login-agree-content">
          <text>已阅读并同意</text>
          <text class="text-primary">
            《蜜雪冰城个人信息保护政策》《蜜雪冰城用户服务协议》
          </text>
        </view>
      </view>
      <view
        class="text-color-grey text-lg"
        @tap="skipLogin"
      >
        暂不登录
      </view>
    </view>
  </view>
</template>
<script>
import { mapActions } from "vuex"
export default {
  name: "Auth",
  data() {
    return {
      isAgree: false
    }
  },
  methods: {
    ...mapActions("user", ["login"]),
    // 模拟登录
    handleLogin() {
      this.login()
      uni.navigateBack()
    },
    skipLogin() {
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  width: 750rpx;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 80rpx;
}

.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &-logo {
    width: 140rpx;
    height: 140rpx;
    margin-bottom: $uni-spacing-row-xxl;
  }
}

.warm-tips {
  text-align: center;
  font-size: $uni-font-size-lg;
  color: $uni-text-color;
  font-weight: 500;
  margin: 90rpx 0;
}

.login-action {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-tips {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-secondary;
  margin-bottom: $uni-spacing-row-xl;
}

.login-btn {
  width: 590rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $uni-color-primary;
  border-radius: $uni-border-radius-xl;
  font-size: $uni-font-size-xl;
  color: #fff;
  margin-bottom: $uni-spacing-row-xl;
}

.login-agree {
  display: flex;
  justify-content: center;
  font-size: $uni-font-size-sm;
  color: $uni-text-color;
  margin-bottom: 300rpx;

  &-content {
    margin-left: $uni-spacing-row-sm;
    line-height: 1.5 * $uni-font-size-sm;
  }
}
</style>
